<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./tenxtq.css">
</head>

<body>
    <div>
        <section class="section_main">
            <div class="header_on">
                <div class="l_arrowhead"><img class="l_p" src="./Background_image/left.png"></div>
                <p class="header_p">重庆市</p>
                <div class="r_arrowhead"><img class="share_p" src="./Background_image/share.png"></div>
            </div>
            <div class="temp_mid_cebter">
                <!-- 当前温度 -->
                <div style="margin-top:15px;"></div>
                <div class="signal_up">
                    <div class="enviroment_s"></div>
                    <div class="imply"></div>
                </div>
                <div style="background-color: #52AFE9;"> <img class="main_p" src="./Background_image/1.png"></div>
            </div>
            <div class="main_s_t">
                <p class="output_weather_temperater">18°</p>
                <p class="zt"></p>
                <p class="tr">1212</p>
            </div>
            <div class="describe_w">
                <p class="jianyi">
                    现在天气比较凉爽····
                </p>
            </div>
        </section>
        <section class="sec_tommorrow">
            <div class="toody_t">
                <div class="main_today_t">
                    <p class="today_date">今天</p>
                    <p class="max_min_temp">21/8°</p>
                </div>
                <div class="main_toay_w">
                    <p>阴转多云</p>
                </div>
            </div>
            <hr style="height: 70%;margin-top: 2%; size: 0.1;">
            <div class="tommorrow_t">
                <div class="main_tommorrow_t">
                    <p class="tomm_date">明天</p>
                    <p class="t_max_min_temp">21/8°</p>
                </div>
                <div class="main_tommorrow_w">
                    <p>阴转多云</p>
                </div>
            </div>
        </section>
        <div class="table_left_futher">
            <div id="t1" class="tx">
                <p class="time1" id="time_id1">18:00</p>
                <div class="yun2">

                </div>
                <p class="tem1" id="tmp_id1">16°</p>
            </div>
            <div id="t2" class="tx">
                <p class="time1" id="time_id2">18:00</p>
                <div class="yun2">

                </div>
                <p class="tem1" id="tmp_id2">16°</p>
            </div>
            <div id="t3" class="tx">
                <p class="time1" id="time_id3">18:00</p>
                <div class="yun2">
                </div>
                <p class="tem1" id="tmp_id3">16°</p>
            </div>
            <div id="t4" class="tx">
                <p class="time1" id="time_id4">18:00</p>
                <div class="yun2">

                </div>

                <p class="tem1" id="tmp_id4">16°</p>
            </div>
            <div id="t5" class="tx">
                <p class="time1" id="time_id5">18:00</p>
                <div class="yun2">

                </div>
                <p class="tem1" id="tmp_id5">16°</p>
            </div>
            <div id="t6" class="tx">
                <p class="time1" id="time_id6">18:00</p>
                <div class="yun2">

                </div>
                <p class="tem1" id="tmp_id6">16°</p>
            </div>
            <div id="t7" class="tx">
                <p class="time1" id="time_id7">18:00</p>
                <div class="yun2">

                </div>
                <p class="tem1" id="tmp_id7">16°</p>
            </div>
            <div id="t8" class="tx">
                <p class="time1" id="time_id8">18:00</p>
                <div class="yun2">

                </div>
                <p class="tem1" id="tmp_id8">16°</p>
            </div>
            <div id="t9" class="tx">
                <p class="time1" id="time_id9">18:00</p>
                <div class="yun2">

                </div>
                <p class="tem1" id="tmp_id9">16°</p>
            </div>
            <div id="t10" class="tx">
                <p class="time1" id="time_id10">18:00</p>
                <div class="yun2">

                </div>
                <p class="tem1" id="tmp_id10">16°</p>
            </div>
            <div id="t11" class="tx">
                <p class="time1" id="time_id11">18:00</p>
                <div class="yun2">

                </div>
                <p class="tem1" id="tmp_id11">16°</p>
            </div>
            <div id="t2" class="tx">
                <p class="time1" id="time_id12">18:00</p>
                <div class="yun2"></div>
                <p class="tem1" id="tmp_id12">16°</p>
            </div>
        </div>
        <section class="big_box_t_w">
            <div class="p_patter" id="part_4">
                <p class="p_patter_p">昨天</p>
                <p class="p_patter_txt" id="zuotian_date">4/15</p>
                <p class="p_patter_txt_weather" id="zuotian_txt">阴</p>
                <div class="p_patter_txt_weather_p">
                </div>
                <p class="p_patter_txt_temp_max" id="p_patter_txt_temp_max_id_zuotia">21°</p>
                <p class="p_patter_txt_temp_min" id="p_patter_txt_temp_min_id_zuotia">8°</p>
                <div class="p_patter_txt_weather_p"></div>
                <p class="p_patter_txt_temp_w_c" id="p_patter_txt_temp_min_id_type">多云</p>
                <p class="p_patter_txt_b" id="p_patter_txt_temp_min_id_fx">南风</p>
                <p class="p_patter_txt_b" id="p_patter_txt_temp_min_id_fx_fl">3级</p>
            </div>
            <div class="p_patter" id="part_4">
                <p class="p_patter_p">今天</p>
                <p class="p_patter_txt" id="jintian_date">4/15</p>
                <p class="p_patter_txt_weather" id="jintian_txt">阴</p>
                <div class="p_patter_txt_weather_p"></div>
                <p class="p_patter_txt_temp_max" id="p_patter_txt_temp_max_id_jintian">21°</p>
                <p class="p_patter_txt_temp_min" id="p_patter_txt_temp_min_id_jintian">8°</p>
                <div class="p_patter_txt_weather_p"></div>
                <p class="p_patter_txt_temp_w_c" id="p_patter_txt_temp_min_id_type_jintian">多云</p>
                <p class="p_patter_txt_b" id="p_patter_txt_temp_min_id_fx_jintian">南风</p>
                <p class="p_patter_txt_b" id="p_patter_txt_temp_min_id_fx_fl_jintian">3级</p>
            </div>
            <div class="p_patter" id="part_4">
                <p class="p_patter_p">明天</p>
                <p class="p_patter_txt" id="mingtian_date">4/15</p>
                <p class="p_patter_txt_weather" id="mingtian_txt">阴</p>
                <div class="p_patter_txt_weather_p">
                </div>
                <p class="p_patter_txt_temp_max" id="p_patter_txt_temp_max_id_mingtian">21°</p>
                <p class="p_patter_txt_temp_min" id="p_patter_txt_temp_min_id_mingtian">8°</p>
                <div class="p_patter_txt_weather_p"></div>
                <p class="p_patter_txt_temp_w_c" id="p_patter_txt_temp_min_id_type_mingtian">多云</p>
                <p class="p_patter_txt_b" id="p_patter_txt_temp_min_id_fx_mingtian">南风</p>
                <p class="p_patter_txt_b" id="p_patter_txt_temp_min_id_fx_fl_mingtian">3级</p>
            </div>
            <div class="p_patter" id="part_4">
                <p class="p_patter_p" id="p_patter_txt_data_id_1">后天</p>
                <p class="p_patter_txt" id="date_1">4/15</p>
                <p class="p_patter_txt_weather" id="txt_1">阴</p>
                <div class="p_patter_txt_weather_p">
                </div>
                <p class="p_patter_txt_temp_max" id="p_patter_txt_temp_max_id_1">21°</p>
                <p class="p_patter_txt_temp_min" id="p_patter_txt_temp_min_id_2">8°</p>
                <div class="p_patter_txt_weather_p"></div>
                <p class="p_patter_txt_temp_w_c" id="p_patter_txt_temp_min_id_type_1">多云</p>
                <p class="p_patter_txt_b" id="p_patter_txt_temp_min_id_fx_1">南风</p>
                <p class="p_patter_txt_b" id="p_patter_txt_temp_min_id_fx_fl_1">3级</p>
            </div>
            <div class="p_patter" id="part_4">
                <p class="p_patter_p" id="p_patter_txt_data_id_2">后天</p>
                <p class="p_patter_txt" id="date_2">4/15</p>
                <p class="p_patter_txt_weather">阴</p>
                <div class="p_patter_txt_weather_p">
                </div>
                <p class="p_patter_txt_temp_max" id="p_patter_txt_temp_max_id_2">21°</p>
                <p class="p_patter_txt_temp_min" id="p_patter_txt_temp_min_id_2_2">8°</p>
                <div class="p_patter_txt_weather_p"></div>
                <p class="p_patter_txt_temp_w_c" id="p_patter_txt_temp_min_id_type_2">多云</p>
                <p class="p_patter_txt_b" id="p_patter_txt_temp_min_id_fx_2">南风</p>
                <p class="p_patter_txt_b" id="p_patter_txt_temp_min_id_fx_fl_2">3级</p>
            </div>
            <div class="p_patter" id="part_4">
                <p class="p_patter_p" id="p_patter_txt_data_id_3">后天</p>
                <p class="p_patter_txt" id="date_3">4/15</p>
                <p class="p_patter_txt_weather">阴</p>
                <div class="p_patter_txt_weather_p">
                </div>
                <p class="p_patter_txt_temp_max" id="p_patter_txt_temp_max_id_3">21°</p>
                <p class="p_patter_txt_temp_min" id="p_patter_txt_temp_min_id_2_3">8°</p>
                <div class="p_patter_txt_weather_p"></div>
                <p class="p_patter_txt_temp_w_c" id="p_patter_txt_temp_min_id_type_3">多云</p>
                <p class="p_patter_txt_b" id="p_patter_txt_temp_min_id_fx_3">南风</p>
                <p class="p_patter_txt_b" id="p_patter_txt_temp_min_id_fx_fl_3">3级</p>
            </div>
        </section>
        <section class="service_last">
            <div class="l_t">
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 2vw;"><img src="./Background_image/car.png"></div>
                    <p class="limit_number">1和6</p>
                    <p class="txt_part_5">尾号限行</p>
                </div>
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 3vw;"><img src="./Background_image/clothes.png">
                    </div>
                    <p class="weather_body_t">较舒适</p>
                </div>
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 5vw;"><img src="./Background_image/umbrella.png">
                    </div>
                    <p class="txt_part_5">雨伞</p>
                </div>
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 3vw;"><img src="./Background_image/cell.png"></div>
                    <p class="limit_number_o">少发</p>
                    <p class="txt_part_5">感冒</p>
                </div>
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 3vw;"><img src="./Background_image/wash_car.png">
                    </div>
                    <p class="limit_number_o">较不宜</p>
                    <p class="txt_part_5">洗车</p>
                </div>
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 3vw;"><img src="./Background_image/basketball.png">
                    </div>
                    <p class="limit_number_o">较适宜</p>
                    <p class="txt_part_5">运动</p>
                </div>
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 3vw;"><img src="./Background_image/sunshine.png">
                    </div>
                    <p class="limit_number_o">较弱</p>
                    <p class="txt_part_5">防嗮</p>
                </div>
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 3vw;"><img src="./Background_image/fish.png"></div>
                    <p class="weather_body_t">较适宜</p>
                </div>
            </div>
            <div class="l_t">
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 3vw;"><img src="./Background_image/package.png">
                    </div>
                    <p class="limit_number_o">适宜</p>
                    <p class="txt_part_5">旅游</p>
                </div>
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 5vw;"><img src="./Background_image/transport.png">
                    </div>
                    <p class="txt_part_5">交通</p>
                </div>
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 3vw;"><img src="./Background_image/feng.png"></div>
                    <p class="weather_body_t">良</p>
                </div>
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 3vw;"><img src="./Background_image/simile.png">
                    </div>
                    <p class="limit_number_o">较适宜</p>
                    <p class="txt_part_5">舒适度</p>
                </div>
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 9vw;"><img src="./Background_image/yijia.png">
                    </div>
                    <p class="txt_part_5">晾晒</p>
                </div>
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 3vw;"><img src="./Background_image/baoshi.png">
                    </div>
                    <p class="weather_body_t">保湿</p>
                </div>
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 3vw;"><img src="./Background_image/diohuan.png">
                    </div>
                    <p class="limit_number_o">较适宜</p>
                    <p class="txt_part_5">晨炼</p>
                </div>
                <div class="part_l_1" id="perporty">
                    <div class="singal_part_5" style="margin-bottom: 3vw;"><img src="./Background_image/bizhi.png">
                    </div>
                    <p class="limit_number_o">易发</p>
                    <p class="txt_part_5">过敏</p>
                </div>
            </div>
        </section>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.js"></script>
<script src="./API_weather.js">
</script>

</html>